<template>
  <view ref="login" class="login-container">
    <img class="cover" src="@/assets/images/login/bg.png" />
    <img @click="hide" class="close" src="@/assets/images/common/close.png" />
    <view class="content">
      <img
        class="logo"
        src="@/assets/images/common/logo.png"
      />
      <view class="title">卖萌短剧</view>
      <view class="slogan">独家爆款短剧免费看</view>
      <view class="auto" v-if="loginType == 'auto'">
        <view class="phone"> +86 176****5600 </view>
        <button @click="beforeAutoLogin" class="login-btn">一键登录</button>
        <view class="code-btn" @click="changeLoginType">验证码登录</view>
        <view class="agree">
          <img
            @click="autoAgree = !autoAgree"
            v-if="autoAgree"
            class="radio"
            src="@/assets/images/common/radio-checked.png"
          />
          <img
            @click="autoAgree = !autoAgree"
            v-else
            class="radio"
            src="@/assets/images/common/radio.png"
          />
          <text>我已阅读并同意</text>
          <text class="agreement">《用户协议》</text>
          <text class="agreement">《隐私政策》</text>
          <text class="agreement">《中国联通服务与隐私协议条款》</text>
        </view>
      </view>
      <view class="code" v-else>
        <view class="item phone flex flex-a-c">
          <text class="des"> +86 </text>
          <input maxlength="11" type="number" v-model.trim="phone" />
        </view>
        <view class="item _code flex flex-a-c">
          <text class="des"> 验证码 </text>
          <input maxlength="4" type="number" v-model.trim="code" />
          <text
            class="get-code"
            :class="{ number: time != 60 }"
            @click="getCode"
            >{{ time != 60 ? time + "s" : "获取验证码" }}</text
          >
        </view>
        <view
          @click="onLogin"
          class="login-btn"
          :class="{ disabled: !noError }"
        >
          登录
        </view>
        <view class="agree">
          <img
            @click="phoneAgree = !phoneAgree"
            v-if="phoneAgree"
            class="radio"
            src="@/assets/images/common/radio-checked.png"
          />
          <img
            @click="phoneAgree = !phoneAgree"
            v-else
            class="radio"
            src="@/assets/images/common/radio.png"
          />
          <text>我已阅读并同意</text>
          <text class="agreement">《用户协议》</text>
          <text class="agreement">《隐私政策》</text>
        </view>
      </view>
    </view>
    <template>
      <u-popup :show="agreeTipVisiable" mode="bottom" :round="10">
        <view class="agree-tip-popup">
          <view class="title">服务协议和隐私政策等指引</view>
          <view class="tip">
            <text>进入下一步前，请先阅读并同意麦萌短剧的</text>
            <text class="sp">《服务条款》</text>
            <text class="sp">《隐私政策》</text>
          </view>
          <view class="btns flex">
            <view @click="agreeTipVisiable=false" class="btn">不同意</view>
            <view @click="onAutoLogin" class="btn">同意并继续</view>
          </view>
        </view>
      </u-popup>
    </template>
  </view>
</template>
<script>
export default {
  data() {
    return {
      autoAgree: false,
      phoneAgree: false,
      loginType: "auto",
      phone: "15807126340",
      code: "",
      time: 60,
      timer: null,
      agreeTipVisiable: false,
    };
  },
  onLoad() {},
  computed: {
    isRightPhone() {
      let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      return phoneReg.test(this.phone);
    },
    isRigthCode() {
      return this.code.length == 4;
    },
    isAgreed() {
      return this.phoneAgree;
    },
    noError() {
      return this.isRightPhone && this.isRigthCode && this.isAgreed;
    },
  },
  methods: {
    hide() {
      this.$refs["login"].$el.classList.add("hide");
      setTimeout(() => {
        this.loginType = "auto";
        this.$emit("hide");
      }, 300);
    },
    changeLoginType() {
      this.loginType = "code";
    },
    countDown() {
      if (this.timer || this.time != 60) return;
      this.timer = setInterval(() => {
        this.time--;
        if (this.time == 0) {
          clearInterval(this.timer);
          this.time = 60;
        }
      }, 1000);
    },
    getCode() {
      if (!this.isRightPhone) {
        return uni.showToast({
          title: "请填写正确手机号",
          icon: "none",
        });
      } else {
        this.countDown();
      }
    },
    onLogin() {
      console.log("login");
    },
    onAutoLogin(){
        console.log('autoLogin')
        this.autoAgree = true
        this.agreeTipVisiable = false
    },
    beforeAutoLogin() {
      if (!this.autoAgree) {
        this.agreeTipVisiable = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.login-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  z-index: 999;
  background: linear-gradient(
    180deg,
    rgba(250, 250, 250, 0) 0%,
    #fafafa 46%,
    #fafafa 100%
  );
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1;
  overflow-y: auto;
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .close {
    position: absolute;
    top: 100rpx;
    left: 30rpx;
    width: 61rpx;
    height: 61rpx;
    z-index: 0;
  }
  animation: show 0.3s linear forwards;
  &.hide {
    animation: hide 0.3s linear forwards;
  }
}
.content {
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  width: 100%;
  .logo {
    width: 154rpx;
    height: 154rpx;
  }
  .title {
    font-size: 50rpx;
    font-family: D-DIN-DIN-Bold;
    font-weight: 600;
    margin-top: 30rpx;
  }
  .slogan {
    color: #757575;
    font-size: 31rpx;
    margin-top: 23rpx;
  }
  .login-btn {
    width: 550rpx;
    height: 93rpx;
    background-color: #52d0d4;
    color: #fff;
    font-size: 35rpx;
    font-weight: 600;
    border: 0;
    line-height: 93rpx;
    border-radius: 93rpx;
    margin-top: 61rpx;
    &.disabled {
      pointer-events: none;
      color: #9fa1a1;
      background-color: #ededed;
    }
  }
  .agree {
    padding: 0 71rpx;
    color: #9fa1a1;
    font-size: 23rpx;
    line-height: 35rpx;
    margin-top: 240rpx;
    .agreement {
      color: #757575;
    }
    img {
      width: 31rpx;
      height: 31rpx;
      position: relative;
      top: 6rpx;
      margin-right: 10rpx;
    }
  }
  .auto {
    margin-top: 167rpx;
    .phone {
      font-size: 54rpx;
      font-family: D-DIN-DIN-Bold;
      font-weight: bold;
      color: #1c1e1f;
    }

    .code-btn {
      color: #757575;
      margin-top: 46rpx;
      font-size: 31rpx;
    }
  }
  .code {
    margin-top: 83rpx;
    .item {
      width: 666rpx;
      height: 100rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      opacity: 1;
      border: 2rpx solid #ededed;
      padding: 0 30rpx;
      box-sizing: border-box;
      text-align: left;
      margin-bottom: 46rpx;
      .des {
        color: #757575;
        font-size: 31rpx;
        width: 148rpx;
        border-right: 2rpx solid #9fa1a1;
        flex-shrink: 0;
      }
      input {
        font-family: D-DIN-DIN-Bold;
        font-size: 38rpx;
        font-weight: 600;
        color: #1c1e1f;
        padding-left: 46rpx;
      }
      .get-code {
        flex-shrink: 0;
        color: #52d0d4;
        font-size: 27rpx;
        height: 100%;
        line-height: 100rpx;
        background-color: transparent;
        &.number {
          color: #1c1e1f;
        }
      }
    }
    .login-btn {
        margin: 0 auto;
      margin-top: 161rpx;
    }
    .agree {
      margin-top: 46rpx;
    }
  }
}

.agree-tip-popup {
  padding: 60rpx;
  text-align: left;
  .title {
    font-size: 38rpx;
    color: #1c1e1f;
  }
  .tip {
    font-size: 27rpx;
    color: #757575;
    margin-top: 58rpx;
    line-height: 40rpx;
    .sp {
      color: #52d0d4;
    }
  }
  .btns {
    margin-top: 67rpx;
    color: #1c1e1f;
    .btn {
      font-size: 31rpx;
      height: 100rpx;
      border: 0;
      border-radius: 100rpx;
      outline: 0;
      line-height: 100rpx;
      background-color:#F5F5F5;
    //   flex: 1;
      text-align: center;
      padding: 0 64rpx;
      &:nth-child(2){
        background-color: #52D0D4;
        color: #fff;
        margin-left: 20rpx;
        flex:1
      }
    }
  }
}
@keyframes show {
  0% {
    height: 0;
  }
  100% {
    height: 100vh;
  }
}
@keyframes hide {
  0% {
    height: 100vh;
  }
  100% {
    height: 0;
  }
}
</style>
